<template>
  <div class="inquirybox">
    <div style="width: 300px;min-width:300px;">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="width:300px">
        <el-tab-pane label="待诊" name="first">
          <ClinicOverview :class="{active:show==1}" @click.native="getPath"></ClinicOverview>
          <div class="patientBox" @click="patientPath"  :class="{active:show==2}">
            <img src="https://cdn7.axureshop.com/demo/1968629/images/%E9%97%AE%E8%AF%8A/u52.svg" alt="" />
            <div class="patientName">
              <span>患者姓名</span>
              <p>44岁</p>
            </div>
            <div class="patientTime">
              <span>上午8：50</span>
              <p>来科就诊<span>3</span>次</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="诊中" name="second">
          <ClinicOverview @click.native="getPath"></ClinicOverview>
        </el-tab-pane>
        <el-tab-pane label="已诊" name="third">
          <ClinicOverview @click.native="getPath"></ClinicOverview>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="background-color: #E5E8EE;width: 82%;height: 89vh;border-radius: 10px;">
      <!-- 三级路由占位符 -->
        <router-view />
    </div>
  </div>
</template>

<script>
import ClinicOverview from "@/components/ClinicOverview.vue";
export default {
  components: {
    ClinicOverview,
  },
  data() {
    return {
      activeName: 'first',
      show:1
    };
  },
  methods: {
    patientPath(){
      this.show=2
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getPath() {
      console.log('跳转')
      this.show=1
    }
  }
};
</script>

<style lang="scss" scoped>
div.inquirybox {
  display: flex;
  justify-content: space-between;
}



.patientBox {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px 5px;

  div.patientName {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    width: 140px;
    font-size: 14px;

    p {
      color: #000;
    }
  }

  div.patientTime {
    color: #000;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;

    p {
      span {
        color: #409eff;
        display: inline-block;
        margin: 0 5px;
      }
    }
  }
}

.active {
  background-color: #C2D8F2;
  font-weight: bolder;
}
</style>
<style>
.el-tabs__item {
  width: 100px;
}
</style>